<template>
  <el-dialog title="人工调整" :visible.sync="dialogVisible" width="800px">
    <el-form :model="formData" ref="form">
      <el-row>
        <el-form-item width="100%">
          <el-radio-group v-model="formData.scheduleType" class="word-style">
            <el-radio label="1">礼拜制</el-radio>
            <el-radio label="2">手动制</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="模式名称" prop="id">
            <el-select placeholder="请选择模式" v-model="formData.schedulePattern" width="500px">
              <el-option
                v-for="item in list"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="danger" @click="submitForm">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { listWorkPattern, updateWorkScheduings } from '@/api/vehicle'

export default {
  name: 'ScheduleBindingDialog',
  data() {
    return {
      dialogVisible: false,
      list: [],
      selectRows: [],
      formData: {
        scheduleType: 'auto', // 默认选中自动排班
        schedulePattern: '' // 排班模式
      }
    }
  },
  mounted() {
    // 监听路由变化，关闭弹窗
    this.$watch(
      () => this.$route.path,
      () => {
        this.dialogVisible = false
      }
    )
    this.initList()
  },
  methods: {
    initList() {
      listWorkPattern()
        .then(res => {
          if (res.code === 200) {
            this.list = res.data[0].concat(res.data[1], res.data[2])
          }
        })
    },
    // 打开弹窗
    openDialog(selectRows) {
      this.dialogVisible = true
      this.selectRows = selectRows
    },
    // 提交表单数据
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          console.log(this.selectRows, this.formData)
          // 这里应该有一个API调用来提交表单数据
          const formData = {
            userIdList: this.selectRows,
            userType: '1',
            workPatternId: this.formData.schedulePattern,
            workPatternType: this.formData.scheduleType
          }
          console.log(formData)
          updateWorkScheduings(formData)
            .then(() => {
              this.$message.success('排班绑定成功')
              this.dialogVisible = false
            })
            .catch(error => {
              this.$message.error(`排班绑定失败: ${error.message}`)
            })
        } else {
          this.$message.error('表单验证失败，请检查输入')
          return false
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-form-item__content{
  margin-top: 10px;
  text-align: center!important;
  font-size: 18px;
}
.el-dialog{
  padding: 10px 20px;
}
::v-deep .el-input{
  width: 600px;
}
.dialog-footer{
  text-align: center;
}
</style>>
